<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" v-show="showSearch">
            <el-row>
                <el-form-item label="做版编码" prop="makeCode">
                    <el-input v-model.trim="queryParams.makeCode" style="width: 180px;" placeholder="请输入做版编码"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="生产单编码" prop="produceNo">
                    <el-input v-model.trim="queryParams.produceNo" style="width: 180px;" placeholder="请输入生产单编码"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="日期" style="width: 308px;">
                    <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>


                <div class="operation">
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <el-button @click="advanced = !advanced">
                        <a style=" color: #448EF7;">
                            <el-icon v-if="advanced">
                                <ArrowUpBold />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowDownBold />
                            </el-icon>
                        </a>
                    </el-button>
                    <right-toolbar style="margin-left: 10px;" :search="false" v-model:showSearch="showSearch"
                        @queryTable="getList" :columns="columns"></right-toolbar>
                </div>
            </el-row>
            <el-row v-if="advanced">
                <el-form-item label="做版人" prop="makeBy">
                    <el-input v-model.trim="queryParams.makeBy" style="width: 180px;" placeholder="请输入做版人"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="出版编号" prop="pubNo">
                    <el-input v-model.trim="queryParams.pubNo" style="width: 180px;" placeholder="请输入出版编号"
                        @keyup.enter="handleQuery" />
                </el-form-item>
            </el-row>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
                <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
            </el-col> -->
        </el-row>
        <div>
            <el-table v-loading="loading" border :data="dataList" :summary-method="getSummaries" show-summary>
                <el-table-column label="序号" width="60" type="index" align="center" />
                <el-table-column label="做版编码" min-width="150" align="center" :show-overflow-tooltip="true" prop="makeCode"
                    v-if="columns[0].visible">
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="handleViewCode(row)" text>{{ row.makeCode
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="做版人" min-width="100" align="center" :show-overflow-tooltip="true" prop="makeBy"
                    v-if="columns[1].visible">
                </el-table-column>
                <el-table-column label="生产单编码" v-if="columns[2].visible" align="center" width="120"
                    :show-overflow-tooltip="true" prop="produceNo">
                </el-table-column>
                <el-table-column label="印刷序列号" v-if="columns[3].visible" align="center" width="120"
                    :show-overflow-tooltip="true" prop="printProduceNo">
                </el-table-column>
                <el-table-column label="出版编码" v-if="columns[4].visible" width="120" align="center"
                    :show-overflow-tooltip="true" prop="pubNo">
                </el-table-column>
                <el-table-column label="书刊编码" v-if="columns[5].visible" width="120" align="center"
                    :show-overflow-tooltip="true" prop="bookNo">
                </el-table-column>
                <el-table-column label="书刊名称" v-if="columns[6].visible" width="120" align="center"
                    :show-overflow-tooltip="true" prop="bookName">
                </el-table-column>
                <el-table-column label="制版信息" v-if="columns[7].visible" min-width="120" prop="makeInfo" align="center">
                </el-table-column>
                <el-table-column label="品种" v-if="columns[8].visible" prop="breed" min-width="160" align="center">
                    <!-- <template #default="scope">
                        <dict-tag :options="ems_order_breed_type" :value="scope.row.breed" />
                    </template> -->
                </el-table-column>
                <el-table-column label="组成" min-width="160" v-if="columns[9].visible" prop="composition" align="center">
                    <!-- <template #default="scope">
                        <dict-tag :options="ems_order_make_up" :value="scope.row.composition" />
                    </template> -->
                </el-table-column>
                <el-table-column label="印张" width="120" v-if="columns[10].visible" prop="sheet" align="center">
                </el-table-column>
                <el-table-column label="印数" width="120" v-if="columns[11].visible" prop="printAmount" align="center">
                </el-table-column>
                <el-table-column label="印色" width="120" v-if="columns[12].visible" prop="printColour" align="center">
                    <template #default="scope">
                        <dict-tag :options="ems_order_print_color" :value="scope.row.printColour" />
                    </template>
                </el-table-column>
                <el-table-column label="版材数量" width="120" v-if="columns[13].visible" prop="sheetAmount" align="center">
                </el-table-column>
                <el-table-column label="版材尺寸" prop="sheetSize" v-if="columns[14].visible" width="120" align="center">
                    <template #default="scope">
                        <dict-tag :options="ems_machine_info_size" :value="scope.row.sheetSize" />
                    </template>
                </el-table-column>
                <el-table-column v-if="columns[15].visible" label="备注" align="center" prop="remark"
                    :show-overflow-tooltip="true" />
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>

<script setup >
import { getVersionDetaillist } from '@/api/production/makeVersion.js'

const { proxy } = getCurrentInstance();
const loading = ref(true);
const dataList = ref([])
const showSearch = ref(true);
const router = useRouter()
const total = ref(0);
const advanced = ref(false)
const sheetTotal = ref(0)
// 列显隐信息
const columns = ref([
    { key: 0, label: `做版编码`, visible: true },
    { key: 1, label: `做版人`, visible: true },
    { key: 2, label: `生产单编码`, visible: true },
    { key: 3, label: `印刷序列号`, visible: true },
    { key: 4, label: `出版编码`, visible: true },
    { key: 5, label: `书刊编码`, visible: true },
    { key: 6, label: `书刊名称`, visible: true },
    { key: 7, label: `制版信息`, visible: true },
    { key: 8, label: `品种`, visible: true },
    { key: 9, label: `组成`, visible: true },
    { key: 10, label: `印张`, visible: true },
    { key: 11, label: `印数`, visible: true },
    { key: 12, label: `印色`, visible: true },
    { key: 13, label: `版材数量`, visible: true },
    { key: 14, label: `版材尺寸`, visible: true },
    { key: 15, label: `备注`, visible: true },
]);

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
});

const getDateNow = () => {
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1  //获取当前月份(0-11,0代表1月，所以要加1);
    var day = myDate.getDate();//获取当前日（1-31）
    if (month < 10) {
        month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day;
    }
    var firstDay = year + "-" + month + "-01";
    return firstDay;
}
const getCurrentDay = () => {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 月份从0开始，需要加1
    var day = now.getDate();
    if (month < 10) {
        month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day;
    }
    const currentDay = year + "-" + month + "-" + day;
    return currentDay
}
const dateRange = ref([getDateNow(), getCurrentDay()]);
const { queryParams } = toRefs(data);
const {
    ems_machine_info_size, ems_order_make_up, ems_order_print_color, ems_order_breed_type
} = proxy.useDict("ems_order_breed_type", "ems_machine_info_size", "ems_order_make_up", "ems_order_print_color");

const getList = () => {
    loading.value = true
    getVersionDetaillist({ ...queryParams.value, startDate: Array.isArray(dateRange.value) ? dateRange.value[0] : undefined, endDate: Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined }).then(res => {
        loading.value = false
        dataList.value = res.rows
        if (res.rows.length > 0) {
            sheetTotal.value = res.rows[0].sheetTotal
        }
        total.value = res.total
    }).catch(err => {
        loading.value = false
    })
}
// 合计
const getSummaries = (param) => {
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计'
            return
        }
        switch (column.property) {
            case "sheetAmount":
                sums[index] = sheetTotal.value
                break;
            default:
                break;
        }
    })
    return sums
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
    dateRange.value = [getDateNow(), getCurrentDay()];
    proxy.resetForm("queryRef");
    handleQuery();
};

const handleViewCode = (row) => {
    router.push({
        path: '/production/makeVersion/versionDetails',
        query: {
            id: row.makeVersionId,
            info: true
        }
    })
}

getList()
// router.beforeEach((to, from, next) => {
//     if (to.path == "/basicInfo/personnel") {
//         getList()
//     }
//     next();
// });
</script>

<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}
</style>